<!--
 * @Author: Bonnie
 * @Date: 2021-09-01 12:13:28
 * @LastEditTime: 2021-10-11 14:33:09
 * @LastEditors: Bonnie
 * @Description: 
 * @FilePath: /custom/src/views/LoaderCss.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
// 正在加载 css样式

<template>
  <div class="container">
    <div class="loaders">
      <!-- 第1种 -->
      <div class="loader">
        <div class="ball-pulse">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第2种 -->
      <div class="loader">
        <div class="ball-grid-pulse">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第3种 -->
      <div class="loader">
        <div class="ball-clip-rotate">
          <div></div>
        </div>
      </div>
      <!-- 第4种 -->
      <div class="loader">
        <div class="ball-clip-rotate-pulse">
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第5种 -->
      <div class="loader">
        <div class="square-spin">
          <div></div>
        </div>
      </div>
      <!-- 第6种 -->
      <div class="loader">
        <div class="ball-clip-rotate-multiple">
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第7种 -->
      <div class="loader">
        <div class="ball-pulse-rise">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第8种 -->
      <div class="loader">
        <div class="ball-rotate">
          <div></div>
        </div>
      </div>
      <!-- 第9种 -->
      <div class="loader">
        <div class="cube-transition">
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第10种 -->
      <div class="loader">
        <div class="ball-zig-zag">
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第11种 -->
      <div class="loader">
        <div class="ball-zig-zag-deflect">
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第12种 -->
      <div class="loader">
        <div class="ball-triangle-path">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第13种 -->
      <div class="loader">
        <div class="ball-scale">
          <div></div>
        </div>
      </div>
      <!-- 第14种 -->
      <div class="loader">
        <div class="line-scale">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第15种 -->
      <div class="loader">
        <div class="line-scale-party">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="ball-scale-multiple">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第16种 -->
      <div class="loader">
        <div class="ball-pulse-sync">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第17种 -->
      <div class="loader">
        <div class="ball-beat">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第18种 -->
      <div class="loader">
        <div class="line-scale-pulse-out">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第19种 -->
      <div class="loader">
        <div class="line-scale-pulse-out-rapid">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第20种 -->
      <div class="loader">
        <div class="ball-scale-ripple">
          <div></div>
        </div>
      </div>
      <!-- 第21种 -->
      <div class="loader">
        <div class="ball-scale-ripple-multiple">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第22种 -->
      <div class="loader">
        <div class="ball-spin-fade-loader">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第23种 -->
      <div class="loader">
        <div class="line-spin-fade-loader">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第24种 -->
      <div class="loader">
        <div class="triangle-skew-spin">
          <div></div>
        </div>
      </div>
      <!-- 第25种 -->
      <div class="loader">
        <div class="pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第26种 -->
      <div class="loader">
        <div class="ball-grid-beat">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 第27种 -->
      <div class="loader">
        <div class="semi-circle-spin">
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "LoaderCss",
  data() {
    return {};
  }
};
</script>
<style lang='scss' scoped>
.container {
  padding: 100px;
}
.abc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  height: 300px;
}
.loader > div {
  div {
    background-color: orange;
  }
}
</style>